<template>
    <div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane :label=item.label :name=item.value v-for="(item,index) in activeValue" :key=index>
                <!--日统计-->
                <div v-if="activeName == 'first'">
                    <el-card class="box-card">
                        <!--数据总览-->
                        <el-row :gutter="50">
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-row>今日发放金额</el-row>
                                    <br/>
                                    <el-row>
                                        <span>¥{{ count.data.aom }}</span>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-row>今日支付金额</el-row>
                                    <br/>
                                    <el-row>
                                        <span>¥{{count.data.aom}}</span>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-row>今日发放次数</el-row>
                                    <br/>
                                    <el-row>
                                        <span>{{count.data.amount}}次</span>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-row>今日支付次数</el-row>
                                    <br/>
                                    <el-row>
                                        <span>{{count.data.amount}}次</span>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                        <br/>
                    </el-card>
                    <div class="interspaceH"></div>
                </div>
                <div v-if="activeName == 'second'">
                    <el-card class="box-card">
                        <!--数据总览-->
                        <el-row :gutter="50">
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-row>本月发放金额</el-row>
                                    <br/>
                                    <el-row>
                                        <span>¥{{countMonth.data.aomMonth}}</span>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-row>本月支付金额</el-row>
                                    <br/>
                                    <el-row>
                                        <span>¥{{countMonth.data.aomMonth}}</span>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-row>本月发放次数</el-row>
                                    <br/>
                                    <el-row>
                                        <span>{{countMonth.data.amountMonth}}次</span>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple-dark">
                                    <el-row>本月支付次数</el-row>
                                    <br/>
                                    <el-row>
                                        <span>{{countMonth.data.amountMonth}}次</span>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                        <br/>
                    </el-card>
                    <div class="interspaceH"></div>
                </div>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <div v-if="activeName == 'first'">
                        <el-form ref="ruleFormRef" size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
                            <el-form-item>
                                <el-date-picker
                                        v-model="queryData.date"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        style="width: 300px"
                                        value-format="yyyy-MM-dd"
                                        end-placeholder="结束时间">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="queryData.empId" placeholder="请选择成员">
                                    <el-option
                                            v-for="item in emp"
                                            :key="item.empId"
                                            :label="item.empName"
                                            :value="item.empId" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="primary" @click="query1">查询</el-button>
                                <el-button size="small" @click="resetForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <el-card class="box-card">
                            <div>
                                <el-button icon="el-icon-plus" @click="download1">导出数据
                                </el-button>
                            </div>
                            <!--table-->
                            <div class="interspaceH"></div>
                            <el-table @selection-change="tableRowChange" :data="tableData"
                                      :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                                <el-table-column prop="sendTime" label="日期">
                                </el-table-column>
                                <el-table-column prop="redAmount" label="发放金额">
                                </el-table-column>
                                <el-table-column prop="count" label="发放次数">
                                </el-table-column>
                                <el-table-column prop="count" label="支付次数">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="tiaozhuan">查看记录</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                           :current-page="pagePagination.currentPage"
                                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                           layout="total, sizes, prev, pager, next"
                                           :total="pagePagination.total">
                            </el-pagination>
                        </el-card>
                    </div>
                    <div v-if="activeName == 'second'">
                        <el-form ref="ruleFormRef" size="small" :inline="true" :model="formData" class="demo-form-inline" label-width="100px">
                            <el-form-item>
                                <el-date-picker
                                        v-model="formData.date"
                                        type="monthrange"
                                        range-separator="至"
                                        start-placeholder="开始月份"
                                        end-placeholder="结束月份">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="formData.empId" placeholder="请选择成员">
                                    <el-option
                                            v-for="item in emp"
                                            :key="item.empId"
                                            :label="item.empName"
                                            :value="item.empId" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="primary" @click="query2">查询</el-button>
                                <el-button size="small" @click="resetForm()">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <el-card class="box-card">
                            <div>
                                <el-button icon="el-icon-plus" @click="download2">导出数据
                                </el-button>
                            </div>
                            <!--table-->
                            <div class="interspaceH"></div>
                            <el-table @selection-change="tableRowChange" :data="table"
                                      :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                                <el-table-column prop="sendTime" label="日期">
                                </el-table-column>
                                <el-table-column prop="redAmount" label="发放金额">
                                </el-table-column>
                                <el-table-column prop="count" label="发放次数">
                                </el-table-column>
                                <el-table-column prop="count" label="支付次数">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="tiaozhuan">查看记录</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                           :current-page="pagePagination.currentPage"
                                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                           layout="total, sizes, prev, pager, next"
                                           :total="pagePagination.total">
                            </el-pagination>
                        </el-card>
                    </div>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination"
import axios from "axios";

export default {
    components: {
        Pagination
    },
    data() {
        return {
            emp: [],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            count: {
                data:{
                    aom: 0,
                    amount: 0
                }

            },
            countMonth: {
                aomMonth: 0,
                amountMonth: 0
            },
            activeName: 'first',
            activeValue:[
                {
                    label: '按日统计',
                    value: 'first',
                },
                {
                    label: '按月统计',
                    value: 'second',
                },
            ],
            //日
            uptime: '',
            endtime: '',
            //月
            upmonth: '',
            endmonth: '',
            queryData: {
                date: [],
                empId: ''
            },
            formData: {
                date: [],
                empId: ''
            },
            //日
            tableData: [],
            //月
            table: [],
            //分页开始
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 1
            },
            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken')
            },
            //分页结束
        }
    },
    mounted() {
        this.queryDataHandle(1,10)
    },
    methods: {
        queryDataHandle(page = 1, row = 10){
            let payload = {
                pageNum: page,
                pageSize: row
            }
            let that = this
            //发放统计
            that.$request("/api/redEnvelope/byRedEnvelope/1_0", payload, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
            //今日发放统计
            that.$request("/api/redEnvelope/byRedEnvelopeTime/1_0", { }, "POST").then((data) => {
                that.count = data
                if (that.count.data.aom == null) {
                    that.count.data.aom = 0
                }
            })
            //本月发放统计
            that.$request("/api/redEnvelope/byRedEnvelopeMonth/1_0", { }, "POST").then((data) => {
                that.countMonth = data
                if (that.countMonth.data.aomMonth == null) {
                    that.countMonth.data.aomMonth = 0
                }
            })
            //员工
            let emp = {
                empId: ''
            }
            this.$request("/api/emp/getEmpList/1_0", {emp}, "POST").then((data) => {
                that.emp = data.rows
            })
        },
        query1(){
            var envelopeSend = {
                uptime: this.queryData.date[0],
                endtime: this.queryData.date[1],
                empId: this.queryData.empId
            }
            let that = this
            //发放统计
            that.$request("/api/redEnvelope/byRedEnvelope/1_0", envelopeSend, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
        },
        query2(){
            var envelopeSend = {
                uptime: this.formData.date[0],
                endtime: this.formData.date[1],
                empId: this.formData.empId
            }
            let that = this
            //月发放统计
            that.$request("/api/redEnvelope/byRedEnvelope/1_0", envelopeSend, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
        },
        download1() {
            if (this.queryData.date != null){
                this.uptime = this.queryData.date[0]
                this.endtime = this.queryData.date[1]
            }
            var envelopeSend = {
                uptime : this.uptime,
                endtime : this.endtime,
                empId : this.queryData.empId
            }
            this.$requestFile("/api/redEnvelope/exportTable1/1_0", envelopeSend, "红包日统计.xlsx")
        },
        download2() {
            if (this.formData.date != null){
                this.upmonth = this.formData.date[0]
                this.endmonth = this.formData.date[1]
            }
            var envelopeSend = {
                upmonth : this.upmonth,
                endmonth : this.endmonth,
                empId : this.formData.empId
            }
            this.$requestFile("/api/redEnvelope/exportTable1/1_0", envelopeSend, "红包月统计.xlsx")
        },
        tiaozhuan() {
            this.tabCurrent = 'second'
        },

        resetForm() {
            this.queryData = {}
            this.formData = {}
        },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },



        handleClick() {

        },
        resetQuery() {

        },



    }
}
</script>

<style scoped>
.bg-purple-dark {
    background: #cbe7f7;
    padding: 10px;
}

.grid-content {
    border-radius: 4px;
    min-height: 80px;
}
</style>
